<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input v-model="name" type="text" />
    </div>
    <div>
      <span>年龄:</span>
      <input v-model="age" type="number" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="goods()" >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="list.splice(index,1)">删除</button>
            <button @click="good(item,index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            list:[
                {
                    name:'潘潘',
                    age:'19',
                    gender:'男'
                },
                {
                    
                     name:'肖彤',
                     age:'20',
                     gender:'女'

                },
                {
                    name:'君火',
                    age:'23',
                    gender:'男'
                },
              
            ],
            name:'',
            age:'',
            gender:'男',
            flag:true,
            index:0

        }
    },
     methods: {
     goods(){
           if (this.name == "" || this.age == "")
            return alert("请输入完整内容");
            if(this.flag){
            this.list.push({
             name:this.name,
             age:this.age,
             gender:this.gender
            })
            this.name=this.age=this.gender=''
            this.flag=true
            }else{
              this.list[this.index].name=this.name
              this.list[this.index].age=this.age
              this.list[this.index].gender=this.gender
              this.name=this.age=this.gender=''
              this.flag=true

            }
            
            

           
     },
     good(item,index){
        // name=item.name
        // age=item.age
        // gender=item.gender
        console.log(this.list[index]); 
        const last = this.list[index]
        this.name = last.name
        this.age=last.age
        this.gender = last.gender
        this.flag=false
        this.index=index
        
        
          //  console.log(index);
        
     }

 },
    
}
</script>